import 'package:aihu_getx_app/app/modules/commons/commons.dart';
import 'package:aihu_getx_app/utils/constants.dart';
import 'package:aihu_getx_app/widgets/common_image.dart';
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

import '../controllers/d_my_user_job_card_controller.dart';

class DMyUserJobCardView extends GetView<DMyUserJobCardController> {
  const DMyUserJobCardView({super.key});

  @override
  Widget build(BuildContext context) {
    final height =
        ScreenUtil().screenHeight - ScreenUtil().bottomBarHeight - 170;
    return Scaffold(
      appBar: Commons.appBar(
        title: controller.title,
        subTitle: controller.appName.value,
        refresh: controller.onRefresh,
        alwaysShowRefresh: true,
      ),
      body: Scaffold(
        body: RefreshIndicator(
          color: Get.theme.primaryColorLight,
          backgroundColor: Get.theme.primaryColor,
          onRefresh: controller.onRefresh,
          child: Container(
            width: ScreenUtil().screenWidth,
            height: ScreenUtil().screenHeight,
            decoration: const BoxDecoration(
              image: DecorationImage(
                image: AssetImage(Constants.splashBgImage),
                fit: BoxFit.cover,
              ),
            ),
            child: SafeArea(
              child: Stack(
                children: [
                  Positioned(
                    // bottom: 10,
                    height: height,
                    width: ScreenUtil().screenWidth,
                    child: RepaintBoundary(
                      key: controller.repaintWidgetKey,
                      child: Obx(
                        () => CarouselSlider(
                          carouselController: controller.carouselController,
                          options: CarouselOptions(
                            height: height,
                            aspectRatio: 16 / 9,
                            viewportFraction: 1,
                            enlargeCenterPage: true,
                            onPageChanged: (index, reason) {
                              controller.current.value = index;
                              controller.reset();
                            },
                          ),
                          items: controller.userJobCardList.map(
                            (item) {
                              return Builder(
                                builder: (BuildContext context) {
                                  return Container(
                                    width: height * 9 / 16,
                                    height: height * 0.9,
                                    decoration: BoxDecoration(
                                      color: Colors.white.withOpacity(0.5),
                                      borderRadius: BorderRadius.circular(20),
                                    ),
                                    child: Container(
                                      width: height * 9 / 16,
                                      height: height,
                                      clipBehavior: Clip.hardEdge,
                                      decoration: BoxDecoration(
                                        borderRadius: BorderRadius.circular(20),
                                      ),
                                      child: Obx(
                                        key: ValueKey(
                                          item.qrBgIndex.value,
                                        ),
                                        () => Container(
                                          width: height * 9 / 16,
                                          height: height,
                                          decoration: BoxDecoration(
                                            image: item.qrBgImage.value,
                                          ),
                                          child: Column(
                                            children: [
                                              const Expanded(child: SizedBox()),
                                              CommonImage(
                                                item.qrCode,
                                                width: height * 9 / 16 * 0.62,
                                                height: height * 9 / 16 * 0.62,
                                                isCircle: true,
                                                fit: BoxFit.fill,
                                              ),
                                              Container(
                                                decoration: const BoxDecoration(
                                                  color: Colors.white,
                                                  borderRadius:
                                                      BorderRadius.vertical(
                                                    bottom: Radius.circular(
                                                      20,
                                                    ),
                                                  ),
                                                ),
                                                margin: const EdgeInsets.only(
                                                    top: 10),
                                                padding:
                                                    const EdgeInsets.all(10),
                                                child: Column(
                                                  children: [
                                                    Row(
                                                      children: [
                                                        Text(
                                                          '终端：',
                                                          style: Get.textTheme
                                                              .bodySmall,
                                                        ),
                                                        Expanded(
                                                          child: Align(
                                                            alignment: Alignment
                                                                .centerRight,
                                                            child: Text(
                                                              item.appIdDictData
                                                                      ?.label ??
                                                                  "",
                                                              style: Get
                                                                  .textTheme
                                                                  .titleSmall,
                                                            ),
                                                          ),
                                                        ),
                                                      ],
                                                    ),
                                                    Row(
                                                      children: [
                                                        Text(
                                                          '工号：',
                                                          style: Get.textTheme
                                                              .bodySmall,
                                                        ),
                                                        Expanded(
                                                          child: Align(
                                                            alignment: Alignment
                                                                .centerRight,
                                                            child: Text(
                                                              item.cardNo ?? "",
                                                              style: Get
                                                                  .textTheme
                                                                  .titleSmall,
                                                            ),
                                                          ),
                                                        ),
                                                      ],
                                                    ),
                                                    Row(
                                                      children: [
                                                        Text(
                                                          '姓名：',
                                                          style: Get.textTheme
                                                              .bodySmall,
                                                        ),
                                                        Expanded(
                                                          child: Align(
                                                            alignment: Alignment
                                                                .centerRight,
                                                            child: Text(
                                                              item.userIdDictData
                                                                      ?.label ??
                                                                  "",
                                                              style: Get
                                                                  .textTheme
                                                                  .titleSmall,
                                                              maxLines: 1,
                                                              overflow:
                                                                  TextOverflow
                                                                      .ellipsis,
                                                            ),
                                                          ),
                                                        ),
                                                      ],
                                                    ),
                                                  ],
                                                ),
                                              ),
                                            ],
                                          ),
                                        ),
                                      ),
                                    ),
                                  );
                                },
                              );
                            },
                          ).toList(),
                        ),
                      ),
                    ),
                  ),
                  Positioned(
                    bottom: Get.height * 0.4 + 20,
                    left: 10,
                    child: IconButton(
                      onPressed: () {
                        controller.reset(offset: -1);
                      },
                      icon: const Icon(
                        Icons.chevron_left,
                        size: 80,
                      ),
                      style: ButtonStyle(
                        foregroundColor:
                            MaterialStateProperty.all(Colors.white),
                        backgroundColor: MaterialStateProperty.all(
                            Colors.black.withOpacity(0.2)),
                      ),
                    ),
                  ),
                  Positioned(
                    bottom: Get.height * 0.4 + 20,
                    right: 10,
                    child: IconButton(
                      onPressed: () {
                        controller.reset(offset: 1);
                      },
                      icon: const Icon(
                        Icons.chevron_right,
                        size: 80,
                      ),
                      style: ButtonStyle(
                        foregroundColor:
                            MaterialStateProperty.all(Colors.white),
                        backgroundColor: MaterialStateProperty.all(
                            Colors.black.withOpacity(0.2)),
                      ),
                    ),
                  ),
                  Positioned(
                    top: height,
                    left: 0,
                    right: 0,
                    child: Padding(
                      padding: const EdgeInsets.only(bottom: 0),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        children: [
                          ElevatedButton(
                            onPressed: () {
                              controller.changeQrBg();
                            },
                            child: const Text("换背景"),
                          ),
                          Offstage(
                            offstage: Commons.isDeskApp,
                            child: ElevatedButton(
                              onPressed: () {
                                controller.savePhoto();
                              },
                              child: const Text("保存"),
                            ),
                          ),
                          ElevatedButton(
                            onPressed: () {
                              controller.share();
                            },
                            child: const Text("分享"),
                          ),
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}
